<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 额外需求：手动添加数据，自动追加渲染到table上 -->
    <div class="box">

    </div>
    <button class="btn">渲染数据</button>
    <script>
        //用table渲染下列数组
        let data = [
            {
            id: 1,
            name: 'iPhone 15',
            price: 5999,
            },
            {
            id: 2,
            name: 'iPhone 15 Pro',
            price: 7999,
            },
            {
            id: 3,
            name: 'iPhone 15 Pro Max',
            price: 8999,
            },
        ];
        let Box = document.querySelector('.box');
        let btn = document.querySelector('.btn');
        let Tab =  document.createElement('table');
        let Thead = document.createElement('thead');
        let Tbody = document.createElement('tbody');
        let Tr = document.createElement('tr');
        Box.append(Tab);
        Tab.width = 230;
        Tab.border = 1;
        Tab.append(Thead);
        Tab.append(Tbody);
        Thead.append(Tr);
        
        
        btn.onclick = function fn(){
            for(const key in data[0]){
                let th = document.createElement('th')
                Tr.append(th);
                th.append(document.createTextNode(key));
                
            }
            for(const k in data){
                let tr = document.createElement('tr');
                for(const key in data[k]){
                let Td = document.createElement('td');
                    Td.append(data[k][key]);
                    tr.append(Td);
                    
                }
                Tbody.append(tr);
            }
            
        }
        
    </script>

</body>
</html>